<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <meta name="page-help" content="https://getrebuild.com/docs/admin/meta-entity" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/form-design.css}" />
    <title>[[${bundle.L('FormLayout')}]]</title>
  </head>
  <body class="open-right-sidebar">
    <div class="rb-wrapper rb-fixed-sidebar rb-collapsible-sidebar rb-collapsible-sidebar-hide-logo rb-aside rb-color-header" th:classappend="${sideCollapsedClazz}">
      <th:block th:replace="~{/_include/nav-top}" />
      <th:block th:replace="~{/_include/nav-left-admin(active='entities')}" />
      <div class="rb-content">
        <aside class="page-aside">
          <div class="rb-scroller-aside rb-scroller">
            <div class="aside-content">
              <div class="content">
                <div class="aside-header">
                  <button class="navbar-toggle collapsed" type="button"><span class="icon zmdi zmdi-caret-down"></span></button>
                  <span class="title">[[${entityLabel}]]</span>
                  <p class="description">[[${comments}]]</p>
                </div>
              </div>
              <div class="aside-nav collapse">
                <ul class="nav">
                  <li><a href="base">[[${bundle.L('BasicInfo')}]]</a></li>
                  <li><a href="fields">[[${bundle.L('NavFields')}]]</a></li>
                  <li class="active"><a href="form-design">[[${bundle.L('FormLayout')}]]</a></li>
                  <li><a href="advanced">[[${bundle.L('AdvConf')}]]</a></li>
                </ul>
              </div>
            </div>
          </div>
        </aside>
        <div class="rb-right-sidebar field-aside">
          <div class="rb-content">
            <div class="field-head">
              <h4 class="float-left">[[${bundle.L('SomeList,Field')}]]</h4>
              <div class="float-right">
                <a class="btn btn-link btn-sm p-0 J_new-field" style="margin-top: 10px">+ [[${bundle.L('AddSome,Field')}]]</a>
              </div>
            </div>
            <div class="rb-scroller">
              <div class="field-list dd-list">
                <div class="nodata">[[${bundle.L('AllFieldsLayouted')}]]</div>
              </div>
            </div>
            <div class="field-legend">
              <span class="not-nullable">[[${bundle.L('Required')}]]</span>
              <span class="readonly">[[${bundle.L('Readonly')}]]</span>
            </div>
          </div>
        </div>
        <div class="main-content container-fluid">
          <div>
            <div class="float-right">
              <a class="btn btn-link J_add-divider">+ [[${bundle.L('AddSome,Divider')}]]</a>
              <button class="btn btn-primary J_save" type="button">[[${bundle.L('Save')}]]</button>
            </div>
            <div class="tab-container">
              <ul class="nav nav-tabs nav-tabs-classic">
                <li class="nav-item"><a class="nav-link active" href="#form-design" data-toggle="tab">[[${bundle.L('FormAndViewLayout')}]]</a></li>
                <li class="nav-item"><a class="nav-link" href="#adv-control" data-toggle="tab">[[${bundle.L('FormAdvControl')}]] <sup class="rbv"></sup></a></li>
              </ul>
              <div class="tab-content mb-5">
                <div class="tab-pane active" id="form-design">
                  <div class="form-preview view-preview dd-list">
                    <div class="nodata">[[${bundle.L('ClickFieldLayoutTips')}]]</div>
                  </div>
                  <div class="clearfix"></div>
                </div>
                <div class="tab-pane" id="adv-control">
                  <table th:if="${commercial > 0}" class="table table-hover table-p">
                    <thead>
                      <tr>
                        <th>[[${bundle.L('Field')}]]</th>
                        <th>[[${bundle.L('Display')}]]</th>
                        <th>[[${bundle.L('Required')}]]</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="J_template">
                        <td>TEMPLATE</td>
                        <td>
                          <label class="custom-control custom-control-sm custom-checkbox custom-control-inline">
                            <input class="custom-control-input" type="checkbox" name="displayOnCreate" checked />
                            <span class="custom-control-label">[[${bundle.L('WhenCreate')}]]</span>
                          </label>
                          <label class="custom-control custom-control-sm custom-checkbox custom-control-inline">
                            <input class="custom-control-input" type="checkbox" name="displayOnUpdate" checked />
                            <span class="custom-control-label">[[${bundle.L('WhenUpdate')}]]</span>
                          </label>
                        </td>
                        <td>
                          <label class="custom-control custom-control-sm custom-checkbox custom-control-inline">
                            <input class="custom-control-input" type="checkbox" name="requiredOnCreate" />
                            <span class="custom-control-label">[[${bundle.L('WhenCreate')}]]</span>
                          </label>
                          <label class="custom-control custom-control-sm custom-checkbox custom-control-inline">
                            <input class="custom-control-input" type="checkbox" name="requiredOnUpdate" />
                            <span class="custom-control-label">[[${bundle.L('WhenUpdate')}]]</span>
                          </label>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="nodata">[[${bundle.L('ClickFieldLayoutTips')}]]</div>
                </div>
              </div>
            </div>
            <p class="protips">[[${bundle.L('FormAndViewLayoutTips1')}]]</p>
          </div>
        </div>
      </div>
    </div>
    <th:block th:replace="~{/_include/footer}" />
    <script>
      window.__PageConfig = {
        formConfig: _$unthy('[[${FormConfig}]]'),
        entityName: '[[${entityName}]]',
        isSuperAdmin: '[[${isSuperAdmin}]]' === 'true',
      }
    </script>
    <script th:src="@{/assets/js/metadata/form-design.js}" type="text/babel"></script>
  </body>
</html>
